<template>
  <div>
    <div
      :style="{margin:margin}"
      class="drag_drop_table"
    >
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        height="620px"
        :stripe="true"
        :border="border"
        :default-sort="{prop: 'id', order: 'descending'}"
        :header-cell-style="thClass"
        @selection-change="selsChange"
      >
        <el-table-column
          type="selection"
          align="center"
          width="55"
        />
        <template v-for="(item ,index) in tableCols">
          <el-table-column
            v-if="dropCols[index].type==='index'"
            :key="index"
            :prop="dropCols[index].prop"
            :label="item.label"
            :width="dropCols[index].width"
            :align="dropCols[index].align"
            :sortable="dropCols[index].sortable"
            :show-overflow-tooltip="dropCols[index].tooltip"
            :v-show="dropCols[index].show"
            :type="dropCols[index].type"
          />

          <el-table-column
            v-else-if="dropCols[index].type===''"
            :key="index"
            :prop="dropCols[index].prop"
            :label="item.label"
            :width="dropCols[index].width"
            :align="dropCols[index].align"
            :sortable="dropCols[index].sortable"
            :show-overflow-tooltip="dropCols[index].tooltip"
            :v-show="dropCols[index].show"
          />

          <el-table-column
            v-else-if="dropCols[index].type==='date'"
            :key="index"
            :formatter="formatDate"
            :prop="dropCols[index].prop"
            :label="item.label"
            :width="dropCols[index].width"
            :align="dropCols[index].align"
            :sortable="dropCols[index].sortable"
            :show-overflow-tooltip="dropCols[index].tooltip"
            :v-show="dropCols[index].show"
          />

          <el-table-column
            v-else-if="dropCols[index].type==='dict'"
            :key="index"
            :prop="dropCols[index].prop"
            :label="item.label"
            :width="dropCols[index].width"
            :align="dropCols[index].align"
            :sortable="dropCols[index].sortable"
            :show-overflow-tooltip="dropCols[index].tooltip"
            :v-show="dropCols[index].show"
          >
            <template scope="scope">
              <span
                v-for="item in dicts[dropCols[index].prop]"
                :key="item.value"
              >
                <span v-if="item.tag===0 && item.value === scope.row[dropCols[index].prop].toString()">{{ item.label }}</span>
                <el-tag
                  v-if="item.tag===1 && item.value === scope.row[dropCols[index].prop].toString()"
                  :type="item.style"
                >{{ item.label }}</el-tag>
              </span>
            </template>
          </el-table-column>
        </template>

        <el-table-column
          label="操作"
          align="center"
          width="150"
        >
          <template scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="edit(scope.$index,scope.row)"
            />
            <el-popover
              :ref="scope.row.id"
              placement="top"
              width="160"
            >
              <p>确定删除本条数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="$refs[scope.row.id].doClose()"
                >
                  取消
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="del(scope.$index,scope.row.id)"
                >
                  确定
                </el-button>
              </div>
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                icon="el-icon-delete"
              />
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="block"
      align="left"
    >
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  props:{
    // String, Number, Boolean, Function, Object, Array, Symbol
    id: { // 当一个页面多个此组件，需要传入唯一id确认
      type: String
    },
    tableName: {
      required: true,
      type: String
    },
    margin: {
        default: '0 1%'
    },
    tableConfig: { // 表格配置
      required: true,
      type: Object
    },
    tableCols: { // 表格属性
      required: true,
      type: Array
    },
    dropCols: {
      required: true,
      type: Array
    },
    tableData: { // 表格数据
      required: true,
      type: Array
    },
    dicts: { // 字典配置
      required: true,
      type: Object
    },
    totalNum: { // 表格数据总量
      type: Number
    },
    varChange: { // 变量变化名字
      type: Object
    }

  },
  data() {
    return {
      border: true,
      pageSizes: [10, 20, 50, 100],
      // 表格当前页
      currentPage: 1,
      // 每页显示数据数量
      pageSize: 10
    }
  },
  computed: {

  },
  watch: {
    // 初始化表格配置参数
    tableConfig(newval) {
      this.border = newval.border_right
      const pss = newval.pages.split(',').map(Number)
      if (pss) {
          this.pageSizes = pss
      }
    },
    tableData(val){
      if (val) {
        this.$nextTick(()=>{
            this.$refs.multipleTable.doLayout()
        })
      }
    },
    varChange(val) {
      // 数据变动说明表格需要进行重新排版
      if (val.name == 'dropCols') {
        this.$nextTick(function () {
          this.$refs.multipleTable.doLayout()
        })
      }
    }
  },

  mounted() {

  },
  destroyed() {

  },

  methods: {
    // 每页显示数据变更响应
    handleSizeChange(val) {
      this.pageSize = val
      this.$emit('change', 'pageSize', val)
      this.$emit('getData')
    },
    // 换页响应
    handleCurrentChange(val) {
      this.currentPage = val
      this.$emit('change', 'currentPage', val)
      this.$emit('getData')
    },
    // 多选
    selsChange(sels) {
        this.$emit('change', 'sels', sels)
    },

    thClass(row) {
      // 将表头居中
      row.column.headerAlign = 'is-center'
    },

    formatDate(row, column) {
      let value = row[column.property]
      if(!value) {
        return
      } else if (value.toString().length == 8) {
        value = value.toString()
        return value.substring(0,4)+'-'+value.substring(4,6)+'-'+value.substring(6,8)
      }
      value = parseInt(value)
      if (value < 0) {
        return
      }
      const date = new Date(value)
      if (date instanceof Date && !isNaN(date.getTime())) {
        const Y = date.getFullYear() + '-'
        const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
        const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
        const h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
        const m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'
        const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return Y + M + D + h + m + s
      }
    },
    // 列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.drag_drop_table tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        draggable: 'th.is-sortable',
        delay: 0,
        onEnd: evt => {
          if (evt.oldIndex === evt.newIndex) { // 组织本次动作
            return false
          }
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    },

    getDropColRealIndex(index) {
      let temp_index = 0
      for (let i = 0; i < this.dropCol.length; i++) {
        if (this.dropCol[i].sortable) {
          temp_index++
        }
        if (index === temp_index) {
          return i
        }
      }
    },

    edit(index, row) {
      console.log(row)
      this.saveFormVal(row)
      this.dialogChange(true)
      this.addOrEditChange(false)
    },

    uploadFile() {

    },
    downloadFile(type, name) {
      let url = process.env.VUE_APP_BASE_API_COMMON + 'user/download' + '?downloadType=' + type + '&downloadTableName=' + name
      if (type === '2') {
        url += '&currentPage=' + this.currentPage + '&pageSize=' + this.pageSize
      }
      for (const key in this.map) {
        url += '&' + key + '=' + this.map[key]
      }
      window.location.href = url
    }
  }
}
</script>

<style>

</style>
